<template>
  <div class="transaction-detail">
    <el-dialog
      :visible.sync="visiabledialog"
      :before-close="handleClickCancel"
      title="交易详情"
      width="900px"
    >
      <div class="basic">
        <div class="header">基本信息</div>
        <p>
          <span class="title">交易状态</span>
          <span style="margin-left:50px;color:#333;">{{ dialogData.type | statusFilter }}</span>
        </p>
        <p>
          <span class="title">交易时间</span>
          <span style="margin-left:50px;color:#333;">{{ dialogData.time }}</span>
        </p>
        <p>
          <span class="title">支付方式</span>
          <span style="margin-left:50px;color:#333;">{{ dialogData.payType }}</span>
        </p>
      </div>
      <el-table :data="dialogData.tableData" stripe style="width: 100%" max-height="500px">
        <el-table-column label="购买资产">
          <el-table-column prop="itemName" label="产品名称" min-width="20" align="center"/>
          <el-table-column prop="price" label="原价" min-width="20" align="center"/>
        </el-table-column>
      </el-table>
      <pagination
        :total="total"
        :current-page="currentpage"
        :page-size="pagesize"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClickCancel">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
export default {
  components: {
    Pagination
  },
  filters: {
    statusFilter(type) {
      const statusMap = {
        'WAIT_BUYER_PAY': '待支付',
        'TRADE_FINISHED': '交易成功',
        'TRADE_CLOSED': '交易关闭'
      }
      return statusMap[type]
    }
  },
  props: {
    visiabledialog: {
      type: Boolean,
      default: false
    },
    dialogData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      total: 0,
      currentpage: 1,
      pagesize: 10
    }
  },
  methods: {
    // 向父组件事件changeVisiable和布尔值false 父组件用@changeVisiable接收事件 并触发父组件的一个函数 @changeVisiable="changeVisiable"
    handleClickCancel() {
      this.$emit('Visiable', false)
    },
    handleSizeChange(val) {
      console.log(val)
      this.currentpage = 1
      this.pagesize = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    handleCurrentChange(val) {
      console.log(val)
      this.currentpage = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    }
  }
}
</script>

<style lang="scss">
.transaction-detail {
  .el-dialog {
    .el-table {
      border-radius: 5px;
    }
    .el-table thead.is-group th {
      background-color: #f5f5f5;
    }
    .basic {
      width: 100%;
      height: 200px;
      border-radius: 5px;
      border: 1px solid #ddd;
      margin-bottom: 10px;
      .header {
        width: 100%;
        height: 42px;
        font-size: 14px;
        line-height: 42px;
        padding-left: 10px;
        margin-bottom: 25px;
        color: #909399;
        font-weight: 600;
        background-color: #f5f5f5;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
      }
      p {
        height: 25px;
        line-height: 25px;
        padding-left: 50px;
        box-sizing: border-box;
        .title {
          display: inline-block;
          width: 65px;
          font-size: 14px;
          font-weight: 600;
          color: #333;
        }
      }
    }
  }
}
</style>
